<template>
  <div class="way">
     <div id="Modle" v-if="isModle">
	    <div class="details" v-if="isDetails">
		      <div id= title>
			        <h1>{{titles}}</h1>
			  </div>
		      <div>
			     <input type="text" list="cars" v-model="er3" style="bordr:1px solid black;width:15%;"/>
			     <datalist id="cars"  open="open" >
				     <select >
					     <option v-for="(sit,index) in siteList">{{sit.stationName}}</option>
					 </select>	
				 </datalist>
				 <button type="button" class="btn btn-primary" v-on:click="addstie()">添加</button>
			  </div>
		     <div id="siteds">
			     <ul>
				     <li v-for="(slt,index) in site2List">
					   <span>{{slt.stationName}}</span>
					   <button type="button" class="btn btn-danger" v-on:click="siteDel(index)">删除</button>
					 </li>
				 </ul> 
			 </div>
			  <button type="button" class="btn btn-primary" v-on:click="black()">返回</button>
		</div>
	    <div class="db" v-if="isADD" >
		    
		    <table border="1">
			    <tr>
			       <td>路线</td>
				   <td><input type="text" v-model='wayNme'/></td>
			   </tr>
			   <tr>
			       <td>起始点</td>
				   <td><input type="text" v-model='startAdds'/></td>
			   </tr>
			   <tr>
			       <td>终点</td>
				   <td><input type="text"  v-model='endAddress'/></td>
			   </tr>
			    <tr>
			       <td>城市</td>
				   <td>
				      <select v-model="crityId">
					      <option v-for="(cl,index) in cListy" :value="cl.id">{{cl.crityName}}</option>
					  </select>
				   </td>
			   </tr>
			   
			</table>
			<div class="buttons">
			    <button type="button" class="btn btn-success" v-on:click="waysave()">确定</button>
			    <button type="button" class="btn btn-danger" v-on:click="Close()">取消</button>
			</div>	
		</div>
		<div class="dels" v-if="isdel">
		      <p>是否删除该路线？</p>
              <div>
			       <button type="button" class="btn btn-success" v-on:click="way_dels()">确定</button>
			    <button type="button" class="btn btn-danger" v-on:click="delClose()">取消</button>
			  </div>			  
		</div>
	 </div>
    <div class="head">
	   <h2>路线管理</h2>
	   <button type="button" class="btn btn-default gladd" id="gladd" v-on:click="wayadd()">添加路线</button>
	</div>
	
	<div class="way">
	   <div class="center">
	      <table class="table table-striped">
               <tr class="theader">
			       <td>线路</td>
				   <td>起始点</td>
				   <td>终点</td>
				   <td>详情</td>
				   <td>城市</td>
				   <td>操作</td>
			   </tr>
			   <tr v-for="(way,index) in wayList">
				  <td>{{way.lineName}}</td>
				   <td>{{way.startAddress}}</td>
				   <td>{{way.endAddress}}</td>
				    <td><a v-on:click="details(index)">详情</a></td>
				   <td>{{way.crityName}}</td>
				   <td><button type="button" class="btn btn-danger" v-on:click="waydel(index)">删除</button></td>
			   </tr>
			   
         </table>
	   </div>
	</div>
  </div>
</template>

<script>
export default {
  name: 'hello',
  data () {
    return {
        wayList:[],
		isModle:false,
		startAdds:"",
		endAddress:"",
		crityId:0,
		isADD:false,
		isdel:false,
		Id:"",
		cListy:[],
		isDetails:false,
		siteList:[],
		site2List:[],
		wayNme:"",
		titles:"",
		er3:"",
		lineId:""
		
		}
    },
	created(){
	   this.Gljz();
	},
	methods:{
	   Gljz(){
	          this.$axios.get("http://localhost/dudubas_way_jz.php").then(e1=>{
			      this. wayList = e1.data
				  console.log(this.wayList)
				   
			})
			this.$axios.get("http://localhost/dudubas_station_jz.php").then(e2=>{
			               this.siteList=e2.data;
			  })
	   },
	   wayadd(){
	          this.isModle = true;
			  this.isADD = true;
			  this.$axios.get("http://localhost/dudubas_crity_jz.php").then(e1=>{
			         this.cListy = e1.data
			  })
	   },
	   Close(){
	       this.isModle = false;
		   this.isADD = false;
		    console.log(this.crityId)
	   },
	  waysave(){
	    var _this = this;
	   console.log(this.USER)
	        this.$axios.get("http://localhost/DUDUBAS_way_ADD.php?START="+this.startAdds+"&END="+this.endAddress+"&CID="+this.crityId+"&LINENMAE="+this.wayNme).then(e1=>{
			       console.log(e1.data)
			}).then(function(){
			     _this.Gljz();
			     _this.isModle =  false;
				 _this.isADD = false
			})
	   },
	  waydel(ins){
	       this.isModle = true;
		   this.isdel= true;
		   this.Id = this.wayList[ins].id
	   },
	   delClose(){
	      this.isModle = false;
		  this.isdel= false;
		 
	   },
	   way_dels(){
	       this.$axios.get("http://localhost/dudubas_way_del.php?id="+this.Id).then(e1=>{
		             if(e1.data == 1){
					      this.isModle = false;
		                  this.isdel= false;
						  this.Gljz();
					 }
		   })

	   },
	   black(){
	             this.isModle = false;
		        this.isDetails=false;
	   },
	   details(its){
	        this.isModle = true;
		    this.isDetails=true;
			this.titles = this.wayList[its].lineName
			this.lineId = this.wayList[its].id
			var ids = this.wayList[its][0]
			console.log(ids)
			this. siteJz();
			
	   },
	   addstie(){
	          var sites=""
	          for(var i=0;i<this.siteList.length;i++){
			         if(this.er3 == this.siteList[i].stationName){
					      sites =  this.siteList[i]      
					  }
			  }
			  var siteID = sites.id;
			  this.$axios.get("http://localhost/DUDUBAS_site_line_ADD.php?SITEID="+siteID+"&LINEID="+this.lineId).then(e1=>{
			          if(e1.data == "添加成功"){
					        this. siteJz();
					  }
					         
			  })
	   },
	   siteJz(){
	         this.$axios.get("http://localhost/dudubas_site_line_jz.php?id="+this.lineId).then(e2=>{
							      this.site2List=e2.data;
							})
	   },
	   siteDel(DelId){
	         
	         var ids=this.site2List[DelId][0]
			 
			 console.log(ids)
	        this.$axios.get("http://localhost/dudubas_site_line_del.php?id="+ids).then(e2=>{
			console.log(e2.data)
							      if(e2.data == 1){
								       this.siteJz();
								  }
							})  
	   }
	}
  }


</script>
<style scoped>
.way{
    width:100%;
	height:92vh;
	background:#ffffff;
  }
.head {
   height:8vh;
   width:100%;
   background:#eff1f7;
   line-height:8vh;
   display:flex;
   align-items:center;
}
.way a{
    color:black;
}
h2{
  height:6vh;
  line-height:6vh;
  margin-left:5vw;
}
.center{
   width:100%;
   height:92vh;
   display:flex;
   justify-content:center;
}
 table{
    width:80%;
	margin-top:5vh;
	
 }
 tr{
     border-bottom:1px solid #cccccc;
	 height:5vh;
 }
 tr:hover{
    background:#2e7fd7;
 }
td{  
     text-align:center;
	 font-size:2rem;
	 
}
.theader{
    background:#cccccc;
}
#gladd{
      margin-left:65vw;
}
#Modle{
   width:100%;
   height:100vh;
   background:rgba(000,000,000,0.5);
   position:fixed;
   z-index:999;
   display:flex;
   align-items:center;
   justify-content:center;
}
.db{ 
    background:#ffffff;
	width:40%;
	height:30vh;
	display:flex;
   align-items:center;
   justify-content:center;
   flex-direction:column;
}
#Modle table{
     border:1px solid black;
	  
}
#Modle td{
    height:4vh;
    line-height:4vh;
}
#Modle tr:hover{background:#ffffff;}
#Modle input{width:100%;border:none;}
.buttons{
           width:60%;
		   display:flex;
        align-items:center;
        justify-content:center;
		margin-top:2vh;
	  }
.buttons button{margin-left:5vw;margin-right:5vw;}
  .dels{
      width:30%;
	  height:20%;
	  background:#ffffff;
	  display:flex;
   align-items:center;
   justify-content:center;
   flex-direction:column;
  } 
 .details{
        width:60%;
		height:40%;
		background:#ffffff;
		position:fixed;
		top:0;
		left:25vw;
		
 } 
.details li{
       font-size:2rem;
	   border-bottom:1px solid #cccccc;
    } 
#title{
    width:100%;
	height:5vh;
	  display:flex;
   align-items:center;
   justify-content:center;
   background:#2c3a4a;
   color:#ffffff;
}
#siteds{
    width:100%;height:60%;
	border:1px solid black;
}
#siteds ul{padding:0;}
#siteds li{
    width:100%;
	padding-left:2vw;
	position:relative;
}
#siteds li button{position:absolute;right:5vw;}	
</style>
